<template>
    <el-table :data="tableData" cell-class-name="pp" header-cell-class-name="pp"
              stripe>
        <el-table-column fixed label="#" type="index" width="50"/>
        <el-table-column label="姓名" prop="username" width="100"/>
        <el-table-column label="手机号码" prop="telephone">
            <template #default="scope">
                <el-text truncated>{{ scope.row.telephone }}</el-text>
            </template>
        </el-table-column>
        <el-table-column label="邮箱">
            <template #default="scope">
                <el-text truncated>{{ dealText(scope.row.email) }}</el-text>
            </template>
        </el-table-column>
        <el-table-column label="身份证号码">
            <template #default="scope">
                <el-text truncated>{{ scope.row.idCard }}</el-text>
            </template>
        </el-table-column>
        <el-table-column label="负责房区" width="200">
            <template #default="scope">
                <el-text truncated>{{ scope.row.areaName }}区</el-text>
            </template>
        </el-table-column>
        <el-table-column label="地址" prop="address" width="150">
            <template #default="scope">
                <el-popover
                        :content="scope.row.address"
                        :width="200"
                        placement="left"
                        title="地址详情"
                        trigger="hover"
                >
                    <template #reference>
                        <el-text truncated>{{ dealText(scope.row.address) }}</el-text>
                    </template>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="头像" prop="picture" width="150">
            <template #default="scope">
                <el-avatar :size="50" :src="`/api/images/${scope.row.picture}`"/>
            </template>
        </el-table-column>
        <el-table-column label="账号状态" prop="status" width="90">
            <template #default="scope">
                <el-switch v-model="scope.row.status" @change="statusChange(scope.row)"/>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
                <el-button link type="primary" @click="updateVol(scope.row.staffId)">
                    修改
                </el-button>
                <el-popconfirm :title="`确定要删除${scope.row.username}的数据吗？`" cancel-button-text="取消"
                               confirm-button-text="确定"
                               @confirm="deleteClick(scope.row)">
                    <template #reference>
                        <el-button link type="danger">
                            删除
                        </el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <div class="page">
        <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="vtotal"
                hide-on-single-page
                layout="total, prev, pager, next"
                @current-change="handleCurrentChange"
        />
    </div>
  <!--修改志愿者的信息-->
    <div class="update">
        <el-dialog v-model="dialogVisible" :title="form.username" center width="20%">
            <div class="form" style="width: 80%;margin: 10px auto 0">
                <el-form ref="formRef" :model="form" :rules="rules" label-width="0">
                    <el-form-item prop="areaId">
                        <el-select v-model="form.areaId" :placeholder="`请修改${form.username}的服务区域`"
                                   style="width: 100%">
                            <el-option v-for="item in option" :key="item.areaId" :label="`${item.areaName}区`"
                                       :value="item.areaId"/>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="span">
                  <el-button @click="cancel(formRef)">
                      取消
                  </el-button>
                  <el-button type="primary" @click="submit(formRef)">
                    提交
                  </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang='ts' setup>
import { onBeforeMount, ref } from 'vue'
import { Area, Vol, Volunteer } from '@/ts/type'
import { AreaService, VolunteerService } from '@/api'
import { Message, Notification } from '@/plugins/element'
import { EventBus } from '@/utils/mitt'
import { dealText } from '@/utils/commonUtils'
import { rules } from '@/config/formConfig'
import { FormInstance } from 'element-plus'

const option = ref<Area[]>([])
const formRef = ref<FormInstance>()
const dialogVisible = ref<boolean>(false)
const bool = ref<boolean>(false)
const tableData = ref<Volunteer[]>([])
const currentPage = ref<number>(1)
const pageSize = ref<number>(8)
const searchForm = ref<Vol>({})
const vtotal = ref<number>(0)
const form = ref<Vol>({})
// 获取列表数据
const getVolunteerList = () => {
  VolunteerService.getList(currentPage.value, pageSize.value).then(res => {
    const { total, list } = res.data
    vtotal.value = total
    tableData.value = list
  })
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getVolunteerList()
}

const deleteClick = (row: Volunteer) => {
  const { staffId } = row
  VolunteerService.deleteVolunteer(staffId as number).then(res => {
    const { data } = res
    Notification.success(data)
    getVolunteerList()
  })
}

const statusChange = (row: Volunteer) => {
  const { status, staffId, username } = row
  VolunteerService.statusChange(staffId as number, username as string, status as boolean).then(res => {
    const { data } = res
    Notification.success(data)
    getVolunteerList()
  })
}

const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async valid => {
    if (valid) {
      await VolunteerService.putVol(form.value).then(res => {
        const { data } = res
        getVolunteerList()
        dialogVisible.value = false
        Notification.success(data)
      })
    } else {
      Message.error('请重新检查表单数据')
    }
  })
}
const cancel = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
  dialogVisible.value = !dialogVisible.value
}

const searchVolunteer = () => {
  VolunteerService.queryVol(currentPage.value, pageSize.value, searchForm.value).then(res => {
    const { total, list } = res.data
    vtotal.value = total
    tableData.value = list
  })
}

const updateVol = (staffId: number) => {
  VolunteerService.getVolById(staffId).then(res => {
    const { data } = res
    form.value = data
  })
  dialogVisible.value = !dialogVisible.value
}

// 提交志愿者信息
EventBus.on('addVolForm', async res => {
  await VolunteerService.addVol(res).then(res => {
    const { data } = res
    Notification.success(data)
    getVolunteerList()
  })
})

const getOptions = () => {
  AreaService.getOption().then(res => {
    const { data } = res
    option.value = data
  })
}
// 是否搜索
EventBus.on('searchVol', res => {
  bool.value = res
  if (!res) getVolunteerList()
})
EventBus.on('searchVolForm', res => {
  searchForm.value = res
  searchVolunteer()
})
onBeforeMount(() => {
  getVolunteerList()
  getOptions()
})
</script>

<style lang='scss' scoped>
:deep(.pp ) {
  text-align: center;
}

.page {
  margin: 15px auto 0;
}

.form {
  .span {
    text-align: center;
    margin-bottom: 10px;

    span {
      margin: 10px 0;
      display: block;
    }
  }

}
</style>